import * as echarts from "echarts"
import { useEffect, useRef } from "react"
const BarCharts = ({ data, sData, title }) => {
  const chartRef = useRef(null)
  useEffect(() => {
    // const chartDom = document.getElementById("main")
    const myChart = echarts.init(chartRef.current)

    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: data,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: sData,
          type: "bar",
        },
      ],
    }

    option && myChart.setOption(option)
    // 清理函数
    return () => {
      myChart.dispose() // 销毁图表实例
    }
  }, [])
  return (
    <div>
      <div
        ref={chartRef}
        id="main"
        style={{ height: "300px", width: "400px" }}
      ></div>
    </div>
  )
}

export default BarCharts
